<template>

  <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
    <el-form :model="todo">
      <el-form-item label="Promotion name" :label-width="formLabelWidth">
        <el-input v-model="todo.id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Zones" :label-width="formLabelWidth">
        <el-input v-model="todo.text">

        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="todos.closeDialog">Cancel</el-button>
        <el-button type="primary" @click="todos.save">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>

import {useTodos} from '@/stores/todo.js'
import { storeToRefs } from 'pinia'
const todos = useTodos()
const { dialogFormVisible,todo } = storeToRefs(todos)
const formLabelWidth = '140px'




</script>
